/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	letter-spacing: normal;
}
html,body{ width: 100%; height: 100%;}
body{ overflow: hidden;}
a {
	text-decoration: none;
}
@font-face{font-family: "ab";src:url(../font/AgencyFB.ttf)}

/* 你就可以直接使用此字体了 */ 
.music{
	position: fixed;
	width: 130px;
	height: 127px;
	z-index: 200;
	right: 3%;
	bottom: 50px;
}

p.song1 {
	text-align: left;
	margin-top: 20px;
	color: #d9edf7;
	font-size: 15px;
	padding-left: 10px;
	cursor: pointer;
}

p.current{
	color:#fff;
}

.music .center{
	background: url(../images/music.png) no-repeat;
	width: 100px;
	height: 100px;
	z-index: 300;
	position: absolute;
	cursor: pointer;
	right: 11px;
	bottom: 11px;
}
.music .rao{
	background: url(../images/rao.png) no-repeat;
	width: 120px;
	height: 120px;
	position: absolute;
	animation: zouni 3s linear infinite;
	right: 0;
	bottom: 0;
}
@keyframes zouni{
	0%{transform:rotate(0)}
	100%{transform:rotate(-360deg)}
	
	
}

#caidan{
	position: absolute;
	width: 250px;
	height: 290px;
	background-color: #35c097;
	right: 10%;
	border-radius: 4px;
	display: none;
	top: -6px;
}

/* nav */
.click{height: 60px;width: 60px;border-radius:50% ;background: #fff url(../images/click.png);position: absolute;right:60px;top:50px;z-index: 101;cursor: pointer;background-size: cover;box-shadow:0 0 10px #35c097}  
.click:hover{transition:all .7s}

.nav{height: 100%;width: 300px;background: #FFFFFF;position: absolute;z-index: 100;right:-300px;padding-left: 40px;padding-top: 150px;box-sizing:border-box;top:0}
.nav li span{cursor: pointer;display: block;width: 170px;height: 30px;margin-bottom: 30px;background-size:cover;box-sizing:border-box;}
.nav li:nth-of-type(1) span{background: url(../images/nav-font-2.png);}
.nav li:nth-of-type(2) span{background: url(../images/nav-about.png);}
.nav li:nth-of-type(3) span{background: url(../images/nav-font-SKILL.png);}
.nav li:nth-of-type(4) span{background: url(../images/nav-font-WORKS.png);}
.nav li:nth-of-type(5) span{background: url(../images/nav-font.png);}
.nav li.current{color:#35c097;}

/* main */

.main{ z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.main>div{overflow: hidden; width: 100%; height: 100%; position: relative;}
.main>div>*{position: absolute;left: 50%;top: 50%;}
.main>div:nth-of-type(1){ background: url(../images/bg-img-1.jpg);background-size:cover}
.main>div:nth-of-type(2){ background: url(../images/nature-1.jpg);background-size:cover}
.main>div:nth-of-type(3){ background: url(../images/nature-3.jpg);background-size:cover}
.main>div:nth-of-type(4){ background:url(../images/bg3.jpg);background-size:cover ;}

.main>div:nth-of-type(5){background: url(../images/gou.jpg) no-repeat; background-size: cover}


/* black */
.main>div .black{width: 100%;height: 100%;background: #272935;position: absolute;left:0;top:0;transition:all 1s linear 1s;opacity:0.7}

.main>.out .black{opacity:0}

/* screen1 */
.main .screen1 .black1{width: 50%;height: 100%;background:#1e1e1e;position: absolute;left:0;top:0;transition:all 1s;opacity:0.5}

.screen1 .menu{left:1.5%;top:20px;width: 80px;height: 72px;background: #35c097;box-sizing:border-box;padding-left: 0.5%;overflow: hidden;cursor: pointer;padding-top: 0.2%;box-sizing:border-box;display: none;}

.screen1 .menu span{font-size: 20px;color:#FFFFFF;}
.screen1 .menu .img{margin-top: 20px;}

.main>div>div.zhiyin{
	left: 40%;
}

.zhiyin{background: url(../images/zhiyin.png);width: 160px;height: 120px;margin-left: -650px;margin-top: -60px;animation:fou 2s linear infinite}
@keyframes fou{
	0%{transform:translateY(0)}
	50%{transform:translateY(30px)}
	100%{transform:translateY(0 )}
	
}

.screen1 .heart{position: relative;width: 400px;height: 400px;margin-top: -210px;margin-left: -199px;animation:small linear;transition:all 2s;}
.screen1 .heart>*{position: absolute;}
.screen1 .heart .circle0{background: url(../images/circle0.png) no-repeat;background-size:contain ;width:100%;height: 100%;position: absolute;left:0;top:0;border-radius:50% ;}
.screen1 .heart .circle1{background: url(../images/circle1.png) no-repeat;background-size:contain ;width:100%;height: 100%;position: absolute;
animation: spin 8s linear infinite 2s ;
-webkit-animation: spin 8s linear infinite 2s;
-ms-animation: spin 8s linear infinite 2s;
-o-animation: spin 8s linear infinite 2s;
-moz-animation: spin 8s linear infinite 2s;

}




.screen1 .heart .circle2-1{background:url(../images/circle2-1.png) no-repeat;background-size:contain ;width: 100%;height: 100%;position: absolute;left:-9px;top:-6px;transition:all 1s;}

.screen1 .heart .circle2-2{background:url(../images/circle2-2.png) no-repeat;background-size:contain ;width: 100%;height: 100%;position: absolute;left:-13px;top:-16px;transition:all 1s;}

.screen1 .heart .circle3{background:url(../images/circle3-2.png) no-repeat;background-size:contain ;width: 85%;height: 102.5%;position: absolute;left:27px;top:30px}

@keyframes spin{
	0%{ transform: rotate(0deg)}
	100%{ transform: rotate(360deg)}	
}

.screen1 .heart .middle{background: url(../images/middle.png) no-repeat;background-size: contain; width: 280px;height: 310px;left:60px;top:116px;transition:all 2s;}
.screen1 .heart .up{background: url(../images/up-2.png) no-repeat;background-size: contain; width: 315px;height: 309px;left:41px;top:31px;transition:all 2s;}
.screen1 .heart P{position: absolute;left:50%;top:50%;background: url(../images/font.png) no-repeat;width: 110%;height: 57.5%;background-size:contain ;margin-left: -181px;margin-top: -86px;transition:all 2s;}

.line1{background: url(../images/flashline.png) no-repeat;width: 150px;height: 150px;margin-top: 130px;margin-left: -330px;transition:all 2s }
.line2{;background:url(../images/flashline2.png) no-repeat;width: 200px;height: 180px;margin-top:-284px ;margin-left:155px ;transition:all 1s}

.line3{background: url(../images/flash4.png) no-repeat;width: 60px;height: 100px;margin-top: 128px;margin-left: -176px;transition:all 2s;background-size:contain; transition:all 1s}

.line4{background: url(../images/flashline.png) no-repeat;width: 190px;height: 80px;margin-top: -230px;margin-left: 160px;transition:all 2s;background-size:contain; transition:all 1s}
.line5{background: url(../images/line5.png) no-repeat;margin-top: -240px;width: 70px;height: 150px;background-size:contain; transition:all 2s linear;margin-left: -250px;margin-top: 80px;}


/* 落空 */
.out .heart{}
.out .heart .middle{margin-top: -800px;}
.out .heart .up{margin-top: 800px;} 
.out .line1{margin-top: -860px;margin-left: 1000px;}
.out .line2{margin-top: -560px;margin-left: 1000px;}
.out .line3{margin-top: -510px;margin-left: 250px;}
.out .line4{margin-top: -340px;margin-left: 190px;}
.out .line5{margin-left: 250px;margin-top: -580px}
.out .heart .circle2-1{margin-top: -500px;margin-left: -500px;}
.out .heart .circle2-2{margin-top: 500px;margin-left: 500px;}
.out .heart P{opacity:0.1}





/* screen2 */
.screen2 .title{left:20px;top:30px;transition:all 2s}
.screen2 .about{background: url(../images/about.png);width: 120px;height: 130px;background-size: cover;}

aside{width: 500px;height: 500px;margin-top: -160px;margin-left: -350px;transition:all 2s;}
.kuang{background: url(../images/about-me.png) no-repeat;background-size:contain ;width: 420px;height: 317px;position: absolute;left:-120px;top:-20px}


article{background:  no-repeat;width: 600px;height: 400px;margin-left: -20px;margin-top: -200px;background-size:contain ;transition:all 2s}

.flash{background: url(../images/2-line.png);width: 129px;height: 125px;margin-top: -240px;margin-left: -167px;transition:all 1s}
.flash2{background: url(../images/2-line.png);width: 129px;height: 125px;margin-top: 10px;margin-left: -420px;transition:all 2s}

.flash3{background: url(../images/2-line.png);width: 100px;height: 100px;margin-top: -140px;margin-left: -550px;transition:all 2s}

.content{background: url(../images/about-content.png) no-repeat;width: 550px;height: 400px;background-size: contain;margin-left: -180px;margin-top: -200px;opacity:0.8;transition:all 2s}

.content>p{width: 160px;height: 50px;position: absolute;background-size:contain ;}

.font1{background: url(../images/font1.png) no-repeat;right:170px;top:299px;transition:all 1s linear 2.4s}
.font2{background:url(../images/font2.png);right:270px;top:208px;background-size:contain ;transition:all 1s linear 2.2s}

.font7{background:url(../images/about-font7.png);right:52px;top:240px;background-size:contain ;transition:all 1s linear 2s}

.font3{background:url(../images/about-font3.png); right:207px;top:28px;background-size:contain ;transition:all 1s linear 1.2s}

.font4{background:url(../images/about-font4.png);right:40px;top:88px;background-size:contain ;transition:all 1s linear 1.4s;}
.font5{background:url(../images/about-font5.png);right:260px;top:106px;background-size:contain ;transition:all 1s linear 1.6s}
.font6{background:url(../images/about-font6.png);right:100px;top:161px;background-size:contain ;transition:all 1s linear 1.8s}



.screen2.out .title{margin-left:-100px;opacity:0.2}
.screen2.out article{opacity:0.1;margin-left: 500px;}
.screen2.out aside{opacity:0.1;margin-left: -500px;}
.screen2.out .flash{margin-top: -500px;margin-left: 200px;}
.screen2.out .flash2{margin-top: -500px;margin-left: 200px;}
.screen2.out .content{margin-left: 200px;opacity:0.1}

.screen2.out .font1{top:325px;opacity:0}
.screen2.out .font2{top:254px;opacity:0}
.screen2.out .font3{top:70px;opacity:0}
.screen2.out .font4{top:110px;opacity:0}
.screen2.out .font5{top:160px;opacity:0}
.screen2.out .font6{top:220px;opacity:0}
.screen2.out .font7{top:270px;opacity:0}
.screen2.out .flash3{margin-top: -440px;margin-left: 350px;}
/* screen3 */
/*linear-gradient(to bottom,#563d7c 0,#6f5499 100%)*/

.screen3 .title2{    left: 20%;top: 350px;transition:all 2s}

.screen3 .skill{width: 230px;height: 260px;background: url(../images/skill2.png) no-repeat;background-size:cover }
.main .screen3>p{width: 200px;height: 200px;left:20%;top:430px;background-size:contain;transition:all 2s}
.main .screen3>p:hover{
	transform: scale(1.2);
}
.screen3 .skill-1{background:url(../images/skill-ai.png) no-repeat;margin-left: 780px;margin-top: 0px;}
.screen3 .skill-2{background:url(../images/skill-ax.png) no-repeat;margin-left: 510px;margin-top: -40px;}
.screen3 .skill-3{background:url(../images/skill-css.png) no-repeat;margin-left: 710px;margin-top: -150px;}
.screen3 .skill-4{background:url(../images/skill-dw.png) no-repeat;margin-left: 610px;margin-top: 90px;}
.screen3 .skill-5{background:url(../images/skill-jq.png) no-repeat;margin-left: 340px;margin-top: -100px;}
.main .screen3 .skill-6{background:url(../images/skill-ps.png) no-repeat;margin-left: 380px;margin-top: 100px;background-size: contain;}
.screen3 .skill-7{background:url(../images/skill-zixue.png) no-repeat;margin-left: 500px;margin-top: -270px;}
.screen3 .skill-8{background:url(../images/skill-zixueh.png) no-repeat;margin-left: 510px;margin-top: -140px;}

.screen3 .list{}

/* screen3 out*/
.out .black{background: none;}
.screen3.out .title2{margin-left:-200px;opacity:0.2}

.main .screen3.out>p{opacity:0.2;margin-left: 800px;transform:rotate(360deg)}
/*.screen3.out .skill-1{transform:rotate(360deg);margin-left: -800px;}*/








/* screen4 */
.screen4 .title-work{background: url(../images/title-work.png);width: 700px;height: 400px;margin-left: -330px;margin-top: -400px;transition:all 2s}
.screen4 .list{width: 144px;height: auto;margin-left: -650px;margin-top: -180px;z-index: 2000;transition:all 2s;display: none;}
.screen4 .list li{width: 110px;height: 80px;background: url(../images/list.jpg);margin-bottom: 30px;cursor: pointer;background-size: cover;opacity:0.8}
.screen4 .list li:hover{background: url(../images/list-hover.jpg);}
.screen4 .list li span{display: block;width: 110px;height: 80px;background-size:cover;}
.screen4 .list li:nth-of-type(1) span{background: url(../images/web.png) no-repeat;}
.screen4 .list li:nth-of-type(2) span{background: url(../images/list-icon.png) no-repeat;}
.screen4 .list li:nth-of-type(3) span{background: url(../images/list-app.png) no-repeat;}
.screen4 .list li:nth-of-type(4) span{background: url(../images/list-banner.png) no-repeat;}

.screen4.out .title-work{margin-top: -700px;opacity:0.3}


/* section */
.screen4 .section{left:0;top:0;width: 100%;height: 100%;}
.screen4 .section>div{display: none;position: absolute;left:0;top:0;width: 100%;height: 100%;z-index: 230;}
.screen4 .section .web{}

/*.screen4 .section>div:nth-of-type(1){display: block;}*/

/* screen4 out */
.screen4.out .list{margin-left: -900px;opacity:0.4}


/* icon */
#sequence{left:0;top:0}

#sequence .seq-nav{margin-top: -50px;}


/* banner */
.main .screen4 .banner{width: 45%;height: 350px;top:310px;left: 30%;;overflow: hidden;position: relative;background: ;}
.banner ul{width: 9999px;height: 350px;position: absolute;left:0;top:0;}
.banner ul li{width: 850px;height: 350px;float: left;background-size:cover}
.banner ul li:nth-of-type(1){background: url(../images/banner/5.png);}
.banner ul li:nth-of-type(2){background: url(../images/banner/1.png);}
.banner ul li:nth-of-type(3){background: url(../images/banner/4.png);}
.banner ul li:nth-of-type(4){background: url(../images/banner/2.png);}
.banner ul li:nth-of-type(5){background: url(../images/banner/3.png);}
.banner p{width: 850px;height: 350px;z-index: 500;position: absolute;}
.banner p span{font-size: 70px;color:#35c097;margin-top: 150px;cursor: pointer;}
.banner p span.left{float: left;margin-left: 10px;box-shadow:0 0 10px #35c097 }
.banner p span.right{float: right;margin-right: 10px;box-shadow:0 0 10px #35c097}


/* web */
.main .screen4 .web{position: absolute;width: 53%;height: 420px ;left:28%;top:291px;overflow: hidden;}
.web .web-t{width: 9999px;height: 200px;margin-bottom: 20px;}

.web .web-t li{width: 300px;height: 200px;background: black;float: left;margin-left: 33.33px;overflow: hidden;}
.web .web-t li:nth-of-type(1){background: url(../images/web1.jpg) no-repeat;background-size:contain ;}
.web .web-t li:nth-of-type(2){background: url(../images/web2.jpg) no-repeat;background-size:contain ;}
.web .web-t li:nth-of-type(3){background: url(../images/web1jpg.jpg) no-repeat;background-size:contain ;}

.web .web-t li span{display: block;width: 100%;height: 100%;background:#005b40 ;opacity:0.8;color:#fff;text-align: center;font-size: 30px;line-height: 40px;box-sizing:border-box;padding-top: 60px;font-weight: bold;transition:all .5s;opacity:0}


.web .web-t li:hover span{opacity:0.8}

.web .web-1 li:nth-of-type(1){background: url(../images/web6.jpg) no-repeat;background-size:contain ;}
.web .web-1 li:nth-of-type(2){background:url(../images/web-5.jpg) no-repeat;background-size:contain ;}
.web .web-1 li:nth-of-type(3){background:url(../images/web-6.jpg) no-repeat;background-size:contain ;}

.screen4 .section .kaitou{display: block;;width: 50%;height: 420px ;left:27%;top:282px;background:url(../images/kaishi.png) no-repeat;text-align: center;line-height: 420;box-sizing:border-box;padding-left: 100px;padding-top: 140px;background-size: contain;}
.section .kaitou span{display: block;background: url(../images/kaishi-font.png) no-repeat;width: 800px;height: 174px;background-size: contain;opacity:0;transition:all .7s;}
.screen4 .section .kaitou:hover span{display: block;opacity:1}
/* screen5 */

 
/* 旋转 */


.screen4 






/* screen5 */
.screen5 .headline{margin-top: -100px;margin-left: -100px;color:#FFFFFF}
.last-font{background:url(../images/last-font.png) ;width: 1200px;height: 400px;margin-left: -580px;margin-top: -170px;transition:all 2s}


.contact{background:url(../images/contact-box.png)  no-repeat;width: 250px;height: 130px;background-size:contain;cursor: pointer;position: absolute;left:-110px;top:-270px;transition:all 2s}


.contact1{background: url(../images/contact-box1.png);width: 930px;height: 400px;background-size:contain;position: absolute;left:-450px;top:-159px;position: relative;display: none;}
.contact1>div{position: absolute;background-size: contain;}
.ma{background:#4D4D4D url(../images/erweima.png);width: 200px;height: 200px;left: 370px;top:100px}

.qq{background: url(../images/qq.png);width: 250px;height: 75px;left: 79px;top:229px;}
.email{background: url(../images/email.png);width: 250px;height: 75px;left:610px ;top: 80px;}
.tel{background: url(../images/tel.png);width: 250px;height: 75px;left: 80px;top: 80px;}
.wechat{background: url(../images/wechat.png);width: 250px;height: 75px;left: 610px;top: 230px;}
.final{background: url(../images/final.png);width: 300px;height: 50px;left:327px;top:320px}

.c-flash{background: url(../images/contact-flash.png);transition:all 2s;width: 212px;height: 112px;position: absolute;left:-129px;top: -240px;}

/*.contact-b:hover .contact1{}*/


/* screen out */
.screen5.out .last-font{opacity:0.2;margin-top: -400px;}
.screen5.out .c-flash{left:229px;top: -450px;opacity:0.2}
.screen5.out .contact{opacity:0;left:-750px}







.main .screen4 .ap{left:-30px}
.app{transition:all 2s;-moz-transition:all 2s;-webkit-transition:all 2s;-o-transition:all 2s;transition-delay:0.5s;-moz-transition-delay:0.5s;-webkit-transition-delay:0.5s;-o-transition-delay:0.5s; perspective:3000px;width:300px; height:300px;position: absolute; left:50%;top:50%;margin-left: 0px;margin-top:-170px;z-index:5;}
.app ul{ position:relative; width:163px; height:290px; transform-style:preserve-3d;-webkit-transform-style:preserve-3d;animation:run 30s linear infinite;-o-animation:run 30s linear infinite;-webkit-animation:run 30s linear infinite;-moz-animation:run 30s linear infinite; transform:rotateX(-10deg);-webkit-transform:rotateX(-10deg);-moz-transform:rotateX(-10deg);}
@keyframes run{
	0%{ transform:rotateX(-10deg) rotateY(0deg);}
	100%{ transform:rotateX(-10deg) rotateY(360deg);}
}
@-moz-keyframes run{
	0%{-moz-transform:rotateX(-10deg) rotateY(0deg);}
	100%{ -moz-transform:rotateX(-10deg) rotateY(360deg);}
}
@-o-keyframes run{
	0%{ -o-transform:rotateX(-10deg) rotateY(0deg);}
	100%{ -o-transform:rotateX(-10deg) rotateY(360deg);}
}
@-webkit-keyframes run{
	0%{ -webkit-transform:rotateX(-10deg) rotateY(0deg);}
	100%{ -webkit-transform:rotateX(-10deg) rotateY(360deg);}
}
@-ms-keyframes run{
	0%{-ms-transform:rotateX(-10deg) rotateY(0deg);}
	100%{-ms-transform:rotateX(-10deg) rotateY(360deg);}
}
.app ul:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;-o-animation-play-state:paused;-moz-animation-play-state:paused;}
.app ul li:hover{width:250px; height:450px;margin-top: -80px;}
.app ul li{width:163px; transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; height:310px;font-size:80px; text-align: center; line-height:290px; position:absolute; left:0; top:0; z-index:4;}
.app ul li:nth-of-type(1){ background:url(../images/8.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(2){ background:url(../images/7.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(3){ background:url(../images/6.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(4){ background:url(../images/5.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(5){ background:url(../images/4.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(6){ background:url(../images/3.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(7){ background:url(../images/2.jpg) no-repeat 0 0;background-size:cover;}
.app ul li:nth-of-type(8){ background:url(../images/1.jpg) no-repeat 0 0;background-size:cover;}
.app ul li a{width:163px; height:290px; display: inline-block;}
.three.out .app{ opacity:0;margin-top: 1000px;}
.three.out .app ul{ opacity:0;margin-top: 1000px;}



.word{
	display: none;
}


#coming{
	display: none;
}

@media screen and (max-width: 500px) {
	.big,.main{
		display: none;
	}
	.music {
		position: fixed;
		width: 300px;
		height: 76px;
		z-index: 200;
		right: -5%;
		bottom: 20px;
	}
	.music .center {
		width: 80px;
		height: 80px;
		right: 26px;
		top: 4px;
		background-size: contain;
	}
	.music .rao {
		background-size: contain;
		width: 90px;
		height: 90px;
		right: 20px;
		top: 0;
	}

	#word {
		width: 70%;
		overflow: hidden;
		margin-left: 15%;
		position: relative;
		height: 100%;
		display: none;
	}
	#word>div {
		width: 100%;
		height: 230px;
		float: left;
		margin-bottom: 30px;
		box-shadow: 0 4px 10px #608dbb;
		background-size: cover;
		border: 2px solid #fff;
		box-sizing: border-box;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 40px;
		margin-top: 100px;
	}
	#word #arrow{
		display: block;
		width: 20%;
		height: 30px;
		margin-left: 40%;
		background-size: contain;
		background-image: url(../images/down.png);
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		bottom: 30px;
		animation: jump 4s infinite;
	}

	@keyframes jump {
		0%{transform:translateY(0px)}
		50%{transform:translateY(20px)}
		100{transform:translateY(0px)}
	}

	#pic1{
		background: url("../images/pic1.jpg");
		opacity: 1;
	}
	#pic2{
		background: url("../images/pic2.jpg");
	}

	#pic3{
		background: url("../images/pic3.jpg");
	}

	#pic4{
		background: url("../images/pic4.jpg");
	}
	#pic5{
		background: url("../images/pic5.jpg");
	}
	#pic6{
		background: url("../images/pic6.jpg");
	}
	#upload{
		position: absolute;
		right:0;
		bottom: 0;
		width: 70px;
		height: 70px;
		background-image: url("../images/upload.png");
		background-position:center center;
		background-size: contain;
		background-repeat: no-repeat;
		display: none;
	}
	
	body{
		background:#72a4d8;
	}

	#coming{
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	#girl{
		background-image: url("../images/girl.png");
		background-position:center center;
		background-size: contain;
		background-repeat: no-repeat;
		width: 200px;
		height: 200px;
		position: absolute;
		left: 19%;
		top: 0px/*150px*/;
		animation: small  3s forwards;
	}
	@keyframes small {
		0%{opacity:0}
		3{opacity:1}
		50%{opacity:1;transform: scale(0.6);translateX(0)}
		100%{
			opacity:1;transform:translateX(-90px) scale(0.6);
		}
	}

	#boy{
		background-image: url("../images/boy.png");
		background-position:center center;
		background-size: contain;
		background-repeat: no-repeat;
		width: 200px;
		height: 200px;
		position: absolute;
		right: 19%;
		top: 0px;
		animation: boy  3s forwards;
		-webkit-animation-delay: 3s;
		-moz-animation-delay:  3s;
		-o-animation-delay:  3s;
		animation-delay:  3s;
		opacity:0;
	}
	@keyframes boy {
		0%{opacity:0}
		3{opacity:1}
		50%{opacity:1;transform: scale(0.6);}
		100%{
			opacity:1;transform:translateX(90px) scale(0.6);
		}
	}
	#caidan {
		position: absolute;
		background-color: #35c097;
		right: 16%;
		border-radius: 7px;
		display: none;
		top: -366px;
	}
	p.song1{
		text-align: center;
		margin-top: 40px;
	}
	#close{
		position: absolute;
		top: 2px;
		right:2px;
		background-image: url("../images/x-delect.png");
		width: 20px;
		height: 20px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}


}




